<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式布局实践</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="root">
    <!-- 头部 -->
    <header>
        <div class="header-box">
            <div class="logo">
                网站logo
            </div>
            <nav class="main-nav">
                <ul class="nav-list">
                    <li id="nav-item" class="main-nav-item">
                        <ul class="nav-main-list">
                            <li class="list-item">首页</li>
                            <li class="list-item">导航1</li>
                            <li class="list-item">导航2</li>
                            <li class="list-item">导航3</li>
                            <li class="list-item">导航4</li>
                            <li class="list-item">导航5</li>
                        </ul>
                    </li>
                    <li class="main-nav-login">
                        <div class="login-box">登录 | 注册</div>
                    </li>
                    <li class="phone-show">
                        <div id="nav-btn" class="nav-btn">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </li>
                </ul>
            </nav>

        </div>
    </header>

    <!-- 内容 -->
    <div id="container">
        <div class="container-header"></div>
        <div class="content">
            <!-- 内容一-->
            <div class="content-box content-box1">
                <div class="content-box1-text"></div>
                <div class="content-box1-img">
                    <div class="img-radius"></div>
                </div>
            </div>
            <!-- 内容二-->
            <div class="content-box content-box2">
                <div class="content-box2-text"></div>
                <div class="content-box2-text"></div>
                <div class="content-box2-text"></div>
            </div>
            <!-- 内容三-->
            <div class="content-box content-box3">
                <div class="content-box3-text"></div>
                <div class="content-box3-text"></div>
                <div class="content-box3-text"></div>
                <div class="content-box3-text"></div>
                <div class="content-box3-text"></div>
                <div class="content-box3-text"></div>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <footer></footer>
</div>

<script src="./javascript/index.js"></script>
</body>
</html>